<template>
  <transition name="el-zoom-in-center">
    <div class="cu-preview-main">
      <div class="cu-common-page-header">
        <el-page-header @back="goBack" :content="pageTitle" />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" :loading="loading" v-if="!isDetail">确 定</el-button>
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row :gutter="15" class="main" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255,0.6)">
        <el-form ref="elForm" :model="dataForm" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="回访时间" prop="followUpDate">
                <el-date-picker v-model="dataForm.followUpDate" type="datetime" placeholder="选择回访时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="落地辅导日期">
                <el-input :value="dataForm.guidanceDates" readonly placeholder="暂无落地辅导日期" :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开业日期">
                <el-input :value="formatOpenDate" readonly placeholder="暂无开业日期" :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 招生数据统计与托管招生收费 -->
          <el-col :span="24">
            <div class="detail-section">
              <div class="section-title">
                <i class="el-icon-data-analysis" style="color: rgb(103, 194, 58); margin-right: 6px"></i>
                <strong style="color: rgb(103, 194, 58)">招生数据统计</strong>
              </div>
              <!-- 开业辅导前招生人数 -->
              <el-form-item label="落地辅导前招生情况" prop="enrollmentInfo" label-width="150px">
                <el-input v-model="dataForm.enrollmentInfo" placeholder="请输入落地辅导前招生情况" />
              </el-form-item>

              <div class="detail-section" style="background: #fff">
                <div class="section-title">
                  <i class="el-icon-money" style="color: #e6a23c; margin-right: 6px"></i>
                  <strong style="color: #e6a23c">托管招生与收费标准</strong>
                </div>

                <!-- 顶部统计区域 -->
                <div class="trusteeship-summary" style="display: flex">
                  <el-col :span="8">
                    <el-form-item label="托管总人数" prop="totalCareCount">
                      <el-input-number v-model="dataForm.totalCareCount" :min="0" placeholder="自动计算人数" :style="{ width: '100%' }" :disabled="true" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="预计收入" prop="expectedIncome">
                      <el-input v-model="dataForm.expectedIncome" readonly placeholder="自动计算各项收费×人数总和" :style="{ width: '100%' }">
                        <template slot="append">
                          元/月
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </div>
                <!-- 中间详细数据区域 -->
                <div class="trusteeship-details">
                  <!-- 人数行 -->
                  <div class="detail-row">
                    <el-form-item label="午托人数" prop="lunchCareCount">
                      <el-input-number v-model="dataForm.lunchCareCount" :min="0" placeholder="输入人数" :style="{ width: '100%' }" @change="calculateMonthlyIncome" />
                    </el-form-item>
                    <el-form-item label="晚托人数" prop="eveningCareCount">
                      <el-input-number v-model="dataForm.eveningCareCount" :min="0" placeholder="输入人数" :style="{ width: '100%' }" @change="calculateMonthlyIncome" />
                    </el-form-item>
                    <el-form-item label="全托人数" prop="fullCareCount">
                      <el-input-number v-model="dataForm.fullCareCount" :min="0" placeholder="输入人数" :style="{ width: '100%' }" @change="calculateMonthlyIncome" />
                    </el-form-item>
                    <el-form-item label="午托收费" prop="lunchCareFee">
                      <el-input v-model="dataForm.lunchCareFee" @input="onAmountInput('lunchCareFee', $event)" placeholder="输入价格" class="input-with-select">
                        <el-select v-model="dataForm.lunchFeeCycle" slot="prepend" placeholder="收费周期" @change="calculateMonthlyIncome">
                          <el-option label="按月收费" value="month"></el-option>
                          <el-option label="按学期收费" value="semester"></el-option>
                        </el-select>
                        <template slot="append">
                          元
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="晚托收费" prop="eveningCareFee">
                      <el-input v-model="dataForm.eveningCareFee" @input="onAmountInput('eveningCareFee', $event)" placeholder="输入价格" class="input-with-select">
                        <el-select v-model="dataForm.eveningFeeCycle" slot="prepend" placeholder="收费周期" @change="calculateMonthlyIncome">
                          <el-option label="按月收费" value="month"></el-option>
                          <el-option label="按学期收费" value="semester"></el-option>
                        </el-select>
                        <template slot="append">
                          元
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="全托收费" prop="fullCareFee">
                      <el-input v-model="dataForm.fullCareFee" @input="onAmountInput('fullCareFee', $event)" placeholder="输入价格" class="input-with-select">
                        <el-select v-model="dataForm.fullFeeCycle" slot="prepend" placeholder="收费周期" @change="calculateMonthlyIncome">
                          <el-option label="按月收费" value="month"></el-option>
                          <el-option label="按学期收费" value="semester"></el-option>
                        </el-select>
                        <template slot="append">
                          元
                        </template>
                      </el-input>
                    </el-form-item>
                  </div>
                </div>

                <div class="section-divider"></div>

                <!-- 其他收费项目 -->
                <div class="other-services-section">
                  <div class="other-services-header">
                    <span class="other-services-title">其他收费项目</span>
                    <el-button type="primary" size="mini" @click="addOtherService" icon="el-icon-plus">添加</el-button>
                  </div>

                  <div v-if="dataForm.otherServices.length === 0" class="no-other-services">
                    <i class="el-icon-info"></i>
                    <span>暂无其他收费项目</span>
                  </div>

                  <div v-for="(service, index) in dataForm.otherServices" :key="index" class="other-service-item">
                    <el-row :gutter="15">
                      <el-col :span="6">
                        <el-form-item :label="'服务内容' + (index + 1)" :prop="'otherServices.' + index + '.serviceName'">
                          <el-input v-model="service.serviceName" placeholder="请输入服务内容" maxlength="50"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item label="招生人数" :prop="'otherServices.' + index + '.studentCount'">
                          <el-input-number v-model="service.studentCount" :min="0" :max="9999" controls-position="right" style="width: 100%" @change="calculateMonthlyIncome"></el-input-number>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="服务收费" :prop="'otherServices.' + index + '.fee'">
                          <el-input v-model="service.fee" @input="onOtherServiceFeeInput(index, $event)" placeholder="输入价格" class="input-with-select" style="width: 100%">
                            <el-select v-model="service.feeCycle" slot="prepend" placeholder="收费周期" @change="calculateMonthlyIncome">
                              <el-option label="按月收费" value="month"></el-option>
                              <el-option label="按学期收费" value="semester"></el-option>
                            </el-select>
                            <template slot="append">
                              元
                            </template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                        <el-form-item label=" " label-width="10px">
                          <el-button type="danger" size="mini" @click="removeOtherService(index)" icon="el-icon-delete">删除</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 系统使用情况 -->
          <el-col :span="24">
            <div class="detail-section">
              <div class="section-title">
                <i class="el-icon-setting" style="color: #409eff; margin-right: 6px"></i>
                <strong style="color: #409eff">系统使用情况</strong>
              </div>
              <div class="system-stats">
                <div>
                  <div class="group-title">
                    <div class="bold-title">是否使用以下系统（使用请勾选）</div>
                  </div>
                  <div class="data-grid">
                    <el-checkbox-group v-model="dataForm.systemUsage">
                      <el-checkbox label="贝尔家校平台">贝尔家校平台</el-checkbox>
                      <el-checkbox label="全能数智平台">全能数智平台</el-checkbox>
                      <el-checkbox label="MaxAI错题宝">MaxAI错题宝</el-checkbox>
                      <el-checkbox label="AI智学平台">AI智学平台</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <div class="data-grid" style="margin-top: 4px">
                    <el-input v-model="dataForm.otherSystem" placeholder="校区系统使用情况补充内容"></el-input>
                  </div>
                </div>
                <div>
                  <div class="group-title">
                    <div class="bold-title">
                      家校平台基础数据
                      <span>(当前数据由系统后台提供)</span>
                    </div>
                    <el-button type="text" size="mini" @click="loadSchoolZoneEnrollments" style="margin-left: 10px">
                      <i class="el-icon-refresh"></i>
                      刷新数据
                    </el-button>
                  </div>
                  <div class="data-grid border-title">
                    <div class="data-system-list">
                      <span>在职老师</span>
                      <span class="data-text">{{ dataForm.teacherCount || 0 }}人</span>
                    </div>
                    <div class="data-system-list">
                      <span>在校学生</span>
                      <span class="data-text">{{ dataForm.studentCount || 0 }}人</span>
                    </div>
                    <div class="data-system-list">
                      <span>创建班级</span>
                      <span class="data-text">{{ dataForm.classCount || 0 }}个</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="group-title">
                    <div class="bold-title">
                      校区参训数据
                      <span>(当前数据由系统后台提供)</span>
                    </div>
                    <el-button type="text" size="mini" @click="loadTrainingData" style="margin-left: 10px">
                      <i class="el-icon-refresh"></i>
                      刷新数据
                    </el-button>
                  </div>
                  <div v-if="!dataForm.trainingData || dataForm.trainingData.length === 0" class="empty-data">
                    <i class="el-icon-info"></i>
                    <span>暂无参训数据</span>
                  </div>
                  <el-table v-else :data="dataForm.trainingData" v-loading="trainingDataLoading" style="width: 100%" border>
                    <el-table-column prop="trainTitle" label="师训名称"></el-table-column>
                    <el-table-column prop="teacherName" label="参训人员"></el-table-column>
                    <el-table-column prop="position" label="职务"></el-table-column>
                    <el-table-column prop="trainTime" label="参训时间" :formatter="custom.tableDateFormat"></el-table-column>
                    <el-table-column prop="isCompleted" label="是否结业">
                      <template slot-scope="scope">
                        <el-tag :type="scope.row.isCompleted ? 'success' : 'warning'">
                          {{ scope.row.isCompleted ? '已结业' : '未结业' }}
                        </el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 辅导反馈 -->
          <el-col :span="24">
            <div class="detail-section">
              <div class="section-title">
                <i class="el-icon-chat-dot-round" style="color: #f56c6c; margin-right: 6px"></i>
                <strong style="color: #f56c6c">辅导反馈</strong>
              </div>
              <div class="feedback-content">
                <el-form-item class="vertical-form-item" prop="problemsSolved" label-width="30px" label="">
                  <div class="vertical-label">1.本次辅导为校区梳理解决了哪些问题？</div>
                  <el-input type="textarea" v-model="dataForm.problemsSolved" placeholder="" :rows="4" maxlength="1000" show-word-limit :style="{ width: '100%' }" />
                </el-form-item>
                <el-form-item class="vertical-form-item" prop="currentProblems" label-width="30px" label="">
                  <div class="vertical-label">2.校区目前运营还有哪些问题？</div>
                  <el-input type="textarea" v-model="dataForm.currentProblems" placeholder="" :rows="4" maxlength="1000" show-word-limit :style="{ width: '100%' }" />
                </el-form-item>
                <el-form-item class="vertical-form-item" prop="hasOpeningCalendar" label-width="30px" label="">
                  <div class="vertical-label">3.校区是否有制作开业后一个月行事历？</div>
                  <el-radio-group v-model="dataForm.hasOpeningCalendar">
                    <el-radio label="true">是</el-radio>
                    <el-radio label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item class="vertical-form-item" prop="additionalContent" label-width="30px" label="">
                  <el-input v-model="dataForm.additionalContent" placeholder="请输入其他补充内容"></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <!-- 开业辅导师满意度评价 -->
          <el-col :span="24">
            <div class="detail-section">
              <div class="section-title">
                <i class="el-icon-star-on" style="color: #e6a23c; margin-right: 6px"></i>
                <strong style="color: #e6a23c">满意度评价</strong>
              </div>
              <div class="evaluation-stats">
                <!-- 水平排列的评价行：满意度 + 综合评分 -->
                <div class="evaluation-grid" role="region" aria-label="满意度评价与综合评分">
                  <div class="rating-card" aria-labelledby="ratingTitle">
                    <div class="card-header">
                      <i class="el-icon-star-on"></i>
                      <span id="ratingTitle" class="card-title">满意度评价</span>
                    </div>
                    <div class="card-body">
                      <el-rate
                        v-model="dataForm.satisfaction"
                        :max="10"
                        @change="onSatisfactionChange"
                        :aria-label="'当前评分 ' + dataForm.satisfaction"
                      ></el-rate>
                      <transition name="fade">
                        <div class="rating-pill" v-if="dataForm.satisfaction > 0">
                          <span class="rating-label" :class="getSatisfactionLabelClass()">{{ getSatisfactionLabel() }}</span>
                          <span class="rating-value">{{ dataForm.satisfaction }}/10</span>
                        </div>
                      </transition>
                    </div>
                  </div>

                  <div class="score-card" aria-labelledby="scoreTitle">
                    <div class="card-header">
                      <i class="el-icon-data-analysis"></i>
                      <span id="scoreTitle" class="card-title">综合评分</span>
                    </div>
                    <div class="card-body">
                      <div class="score-highlight">
                        <span class="score-number">{{ dataForm.satisfaction * 10 }}</span>
                        <span class="score-unit">分</span>
                      </div>
                      <div class="score-meta">(满分100分)</div>
                      <div class="score-bar" aria-hidden="true">
                        <div class="score-fill" :style="{ width: (dataForm.satisfaction * 10) + '%' }"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>

<script>
export { default } from './index.js'
</script>

<style lang="scss" scoped>
@import url(index.scss);

/* ===== 评价横向布局与样式优化（等高与对齐修复） ===== */
.evaluation-stats {
  .evaluation-row {
    display: flex;
    align-items: stretch; /* 让子项在容器中等高 */
    gap: 16px;
    flex-wrap: wrap; /* 小屏自动换行 */
    margin-top: 8px;

    /* 移除 el-form-item 默认的底部间距，避免容器高度计算偏差 */
    :deep(.el-form-item) {
      margin-bottom: 0;
    }

    .evaluation-item {
      flex: 1 1 300px; /* 响应式：最小300px，自动伸缩 */
      margin: 0; /* 去除默认上边距 */
      display: flex; /* 使标签与内容在同一行垂直居中 */
      align-items: center;
      box-sizing: border-box;

      /* 标签与内容对齐优化 */
      :deep(.el-form-item__label) {
        display: flex;
        align-items: center;
      }
      :deep(.el-form-item__content) {
        display: flex;
        align-items: center; /* 保证内容垂直居中 */
        flex: 1; /* 内容区域占满剩余空间 */
      }
    }

    /* 评分控件与标签美化 */
    :deep(.el-rate) {
      font-size: 20px;
      line-height: 1; /* 避免内部行高影响容器高度 */
    }

    .satisfaction-rating {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px; /* 与右侧综合评分卡片保持一致 */
      background-color: #f9fafc;
      border: 1px solid #ebeef5;
      border-radius: 6px;
      width: 100%;
      box-sizing: border-box;

      .rating-display .rating-label {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        line-height: 18px;
        background-color: #f5f7fa;
        color: #606266;
        border: 1px solid #e4e7ed;
      }
    }

    .comprehensive-score {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 8px 10px;
      background-color: #f9fafc;
      border: 1px solid #ebeef5;
      border-radius: 6px;
      width: 100%;
      box-sizing: border-box;

      .score-display {
        font-weight: 600;
        color: #303133;
      }
      .score-description {
        color: #909399;
        font-size: 12px;
      }
    }
  }
}
</style>
